<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import type { TableColumnsType } from 'ant-design-vue'
import { message } from 'ant-design-vue'

const router = useRouter()

interface DataItem {
  id: number
  name: string
  status: string
  createTime: string
  amount: number
}

// 定义表格列
const columns: TableColumnsType = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    slots: { customRender: 'action' },
  },
]

// 模拟数据
const dataSource = ref<DataItem[]>([
  {
    id: 1,
    name: '测试数据1',
    status: '正常',
    createTime: '2024-03-20',
    amount: 100,
  },
  {
    id: 2,
    name: '测试数据2',
    status: '异常',
    createTime: '2024-03-21',
    amount: 200,
  },
])

// 查看详情
const handleViewDetail = (record: DataItem) => {
  router.push(`/analytics/detail/${record.id}`)
}

// 跳转到个人资料
const goToProfile = () => {
  router.push('/profile')
}
</script>

<template>
  <div class="analytics-container">
    <a-card title="数据分析列表">
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :row-key="(record: DataItem) => record.id"
      >
        <template #action="{ record }">
          <a-space>
            <a-button type="link" @click="handleViewDetail(record)">查看详情</a-button>
            <a-button type="link" @click="goToProfile">查看个人资料</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<style scoped>
.analytics-container {
  padding: 24px;
}
</style>